import React from "react";
import clsx from "clsx";

import { useSelector } from "react-redux";

import Sidebar from "./components/Sidebar";
import Header from "./../Header/Header";
import Footer from "./../Footer/Footer";
import { ReduxStoreTypes } from "../../stores/rootStore";
import { Paper } from "@material-ui/core";

export interface LeftSidebarProps {
  children?: any;
  sidebarToggle?: boolean;
  sidebarToggleMobile?: boolean;
  sidebarFixed?: boolean;
  headerFixed?: boolean;
  contentBackground?: string | null;
  headerDrawerToggle?: boolean;
  footerFixed?: boolean;
  themeOptions?: any;
}

const LeftSidebar = (props: LeftSidebarProps) => {
  const themeConfig = useSelector(
    (state: ReduxStoreTypes) => state.themeOptions
  );

  const {
    sidebarToggle,
    sidebarToggleMobile,
    sidebarFixed,
    headerFixed,
    contentBackground,
    headerDrawerToggle,
    footerFixed,
  } = themeConfig;
  const { children } = props;

  return (
    <>
      <div
        className={clsx("app-wrapper", contentBackground, {
          "app-sidebar-collapsed": sidebarToggle,
          "app-sidebar-mobile-open": sidebarToggleMobile,
          "app-sidebar-fixed": sidebarFixed,
          "app-header-fixed": headerFixed,
          "header-drawer-open": headerDrawerToggle,
          "app-footer-fixed": footerFixed,
        })}
      >
        <div>
          <Sidebar />
        </div>
        <div className="app-main">
          <Header />
          <Paper className="app-content">
            <div className="app-content--inner">
              <div className="app-content--inner__wrapper">{children}</div>
            </div>
            <Footer />
          </Paper>
        </div>
      </div>
    </>
  );
};

export default LeftSidebar;
